<script setup lang="ts">
// url: 'http://geek.itheima.net/v1_0/channels',
import axios from 'axios'
import { onMounted, ref } from 'vue';
import { ApiResponse, ChannelData, ChannleItem } from '../types/data';
// axios({....}) axios.get('...')
defineProps<{
  activeId: number
}>()

const emit = defineEmits<{
  (e: 'changeActiveId', val: number): void
}>()

const getChannels = async () => {
  // const res = await axios({
  //   url: 'http://geek.itheima.net/v1_0/channels'
  // })
  // axios 和 axios.request() 两个请求的方式是等价的 配置泛型一般都用axios的别名方式
  /**
   * axios
   */
  // const res = await axios.request<ApiResponse<ChannelData>>({
  //   url: 'http://geek.itheima.net/v1_0/channels'
  // })
  const res = await axios.get<ApiResponse<ChannelData>>('http://geek.itheima.net/v1_0/channels')
  // console.log(res.data.data, res.data.message);
  // console.log(res.data.data.channels[2].name);
  // console.log(res.data.data.channels);
  channels.value = res.data.data.channels
}
const channels = ref<ChannleItem[]>([])
onMounted(() => {
  getChannels()
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!-- 频道id  激活高亮id
        如果这2个id全等 那这个频道就高亮
        点击切换高亮 
        点击事件 - 修改activeId 
        儿子不能直接改父亲数据 - 子传父
      -->
      <a @click="emit('changeActiveId', item.id)" class="item" :class="{ active: item.id === activeId }" href="javascript:;" v-for="(item, i) in channels"
        :key="item.id">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
